<template>
  <div class="withdraw">
    <page-header title="提现明细">
      <page-search :config="searchConfig" :model="searchModel" @search="getData"></page-search>
    </page-header>
    <el-table
      :data="tableData"
      :max-height="clientHeight - 250"
      >
      <el-table-column
        v-for="column in columns"
        :key="column.prop"
        :prop="column.prop"
        :min-width="column.minWidth"
        :label="column.label">
      </el-table-column>
    </el-table>
    <page-pagination
      :pageSize="pageSize"
      :currentPage="pageNum"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import paginationMixin from '@/mixins/pagination';
import { getWithdrawList } from '@/api/order';

export default {
  data() {
    return {
      searchConfig: [
        {
          type: 'input',
          label: '用户名',
          prop: 'userName',
        },
        {
          type: 'daterange',
          label: '申请时间',
          prop: 'timeRange',
        },
      ],
      searchModel: {
        userName: '',
        timeRange: [],
      },
      columns: [
        { prop: 'userName', label: '用户名', minWidth: '120px' },
        { prop: 'amount', label: '提现金额', minWidth: '100px' },
        { prop: 'createTime', label: '申请时间', minWidth: '140px' },
        { prop: 'serviceCharge', label: '状态', minWidth: '80px' },
      ],
      tableData: [],
      pageSize: 10,
      currentPage: 1,
      total: 100,
    };
  },
  mixins: [paginationMixin],
  computed: {
    formatParams() {
      const [startTime, endTime] = this.searchModel.timeRange;
      const params = {
        ...this.searchParams,
        startTime,
        endTime,
      };
      delete params.timeRange;
      return params;
    },
  },
  methods: {
    async getData() {
      const result = await getWithdrawList(this.formatParams);
      const { total, list } = result;
      this.total = total;
      this.tableData = list && list.map((item) => {
        const { createTime, serviceCharge, amount } = item;
        return {
          ...item,
          amount: amount / 100,
          createTime: this.$formatTime(createTime),
          serviceCharge: serviceCharge ? '已提现' : '未提现',
        };
      });
    },
  },
  async created() {
    await this.getData();
  },
};
</script>
